/* =========================================================
   Outcome Delivery block
   File: wwwroot/css/outcome-delivery.css
   Used by: Views/Partials/blocklist/Components/outcomeDeliveryBlock.cshtml
   ========================================================= */

.oc-del {
  box-sizing: border-box; /* padding stays inside the 100% width */
  --oc-navy: #1b2a5b;
  --oc-dark: #0f1c3f;
  --oc-orange: #ff9a45;
  --oc-orange-dark: #f58a2e;
  --oc-bg: #fdf3eb;
  --oc-gutter: 6.8vw;
  --oc-media: 35.8vw;          /* width of the image column */

  width: 100%;
  background: var(--oc-bg);
  padding: clamp(32px, 2.4vw, 62px) var(--oc-gutter) clamp(36px, 4vw, 104px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--oc-navy);
  -webkit-font-smoothing: antialiased;
}
.oc-del *, .oc-del *::before, .oc-del *::after { box-sizing: border-box; margin: 0; padding: 0; }

.oc-del__head,
.oc-del__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--oc-media);
  column-gap: 3.8vw;
}

/* ---------- HEADER ---------- */
.oc-del__eyebrow {
  font-size: clamp(11px, 0.88vw, 22px);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.5vw, 38px);
}
.oc-del h2 {
  font-weight: 600;
  font-size: clamp(22px, 1.95vw, 50px);
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--oc-navy);
  max-width: 38vw;
}
.oc-del__intro {
  align-self: start;
  padding-top: clamp(0px, 1.6vw, 42px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, 0.88vw, 22px);
  line-height: 1.7;
}

/* ---------- BODY ---------- */
.oc-del__body { margin-top: clamp(22px, 2.2vw, 58px); }

.oc-del__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.oc-del__slides { position: relative; flex: 1; display: grid; }
.oc-del__slide {
  grid-area: 1 / 1;              /* all slides stack in the same spot */
  padding-top: clamp(0px, 2.2vw, 58px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.oc-del__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s ease, transform .35s ease;
}
.oc-del__slide h3 {
  font-weight: 600;
  font-size: clamp(16px, 1.33vw, 34px);
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--oc-navy);
  margin-bottom: clamp(10px, 1.1vw, 28px);
}
.oc-del__slide p {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(16px, 1.45vw, 37px);
  line-height: 1.42;
  max-width: 47vw;
}
.oc-del__slide p + p { margin-top: 1.1em; }
.oc-del__link {
  display: inline-block;
  margin-top: clamp(14px, 1.7vw, 44px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(16px, 1.45vw, 37px);
  color: var(--oc-orange-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.oc-del__link:hover { color: var(--oc-navy); }

/* arrows */
.oc-del__nav {
  display: flex;
  gap: clamp(8px, 0.9vw, 22px);
  margin-top: clamp(22px, 2.2vw, 58px);
}
.oc-del__arrow {
  display: grid;
  place-items: center;
  width: clamp(36px, 2.5vw, 64px);
  height: clamp(36px, 2.5vw, 64px);
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--oc-navy);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 28, 63, .06);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.oc-del__arrow svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oc-del__arrow--next { background: var(--oc-orange); color: #fff; }
.oc-del__arrow:hover { background: var(--oc-navy); color: #fff; }
.oc-del__arrow:disabled { opacity: .6; cursor: default; }
.oc-del__arrow:disabled:hover { background: #fff; color: var(--oc-navy); }
.oc-del__arrow--next:disabled:hover { background: var(--oc-orange); color: #fff; }
.oc-del__arrow:focus-visible { outline: 2px solid var(--oc-navy); outline-offset: 3px; }

/* ---------- IMAGE + CTA ---------- */
.oc-del__media {
  position: relative;
  aspect-ratio: 405 / 290;
  overflow: hidden;
  background: #e9e4de;
}
.oc-del__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}
.oc-del__img.is-active { opacity: 1; }

.oc-del__cta {
  position: absolute;
  left: 2%;
  bottom: 2.4%;
  width: 65%;
  background: var(--oc-dark);
  color: #fff;
  padding: clamp(16px, 1.6vw, 42px) clamp(14px, 1.4vw, 36px);
  text-align: center;
}
.oc-del__cta p {
  font-size: clamp(12px, 0.86vw, 22px);
  font-weight: 600;
  margin-bottom: clamp(12px, 1.2vw, 30px);
}
.oc-del__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  background: var(--oc-orange);
  color: #fff;
  font-size: clamp(12px, 0.84vw, 22px);
  font-weight: 600;
  padding: 0.85em 1.6em;
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s ease;
}
.oc-del__cta a:hover { background: var(--oc-orange-dark); color: #fff; }
.oc-del__cta a svg { width: 0.7em; height: 0.7em; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---------- PROGRESS BAR ---------- */
.oc-del__progress {
  position: relative;
  height: 3px;
  margin-top: clamp(22px, 2.8vw, 72px);
  background: #e7e2de;
  overflow: hidden;
}
.oc-del__progress span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--oc-orange);
  transition: width .45s ease;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .oc-del { --oc-gutter: 32px; --oc-media: 42vw; }
  .oc-del h2 { max-width: none; }
  .oc-del__slide p { max-width: none; }
}
@media (max-width: 800px) {
  .oc-del { --oc-gutter: 24px; }
  .oc-del__head,
  .oc-del__body { grid-template-columns: 1fr; row-gap: 20px; }
  .oc-del__intro { padding-top: 0; }
  .oc-del h2 br { display: none; }   /* let the heading wrap naturally on small screens */
  .oc-del__slide { padding-top: 0; }
  .oc-del__media { order: -1; }          /* image above the text on phones */
  .oc-del__cta { width: auto; right: 12px; left: 12px; bottom: 12px; }
}
@media (max-width: 560px) {
  .oc-del { --oc-gutter: 20px; }
  .oc-del__media { aspect-ratio: 4 / 3.6; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-del * { transition: none !important; }
}